<template>
  <div class="index_map_box" id="map"></div>
</template>

<script>
const mapboxgl = window.mapboxgl
export default {
  name: 'IndexMapBox',
  components: {},
  data() {
    return {}
  },
  methods: {},
  mounted() {
    // mapboxgl.accessToken = 'pk.eyJ1Ijoid3VtaSIsImEiOiJja2V0ajI3ZnQwNWFnMnptZTQ2b2VybXNoIn0.BX8A_4eu4nq47KFWhuLGDg'
    mapboxgl.accessToken = 'pk.eyJ1Ijoid3VtaSIsImEiOiJja2V0ajI3ZnQwNWFnMnptZTQ2b2VybXNoIn0.BX8A_4eu4nq47KFWhuLGDg'

    let map = new mapboxgl.Map({
      version: 8,
      name: 'Basic',
      center: [120.31463022979744, 36.06658532033572],
      // center: [116.89909930420157, 36.666567085091614],
      zoom: 16,
      bearing: 11.199999999999818,
      pitch: 60,
      sources: {
        composite: {
          url: 'mapbox://mapbox.mapbox-streets-v8',
          type: 'vector'
        }
      },
      style: 'mapbox://styles/wumi/ckew6c8b60g2s19pij43gk4ft',
      container: 'map',
      antialias: true
    })
    map.on('load', () => {
      // 在任何符号层下面插入该层。
      var layers = map.getStyle().layers

      var labelLayerId
      for (var i = 0; i < layers.length; i++) {
        if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
          labelLayerId = layers[i].id
          break
        }
      }
      // layer 3d buliding
      map.addLayer(
        {
          id: '3d-buildings',
          source: 'composite',
          'source-layer': 'building',
          filter: ['==', 'extrude', 'true'],
          type: 'fill-extrusion',
          minzoom: 15,
          paint: {
            'fill-extrusion-color': ['interpolate', ['exponential', 1], ['get', 'height'], 0, 'hsl(175, 59%, 51%)', 50, 'hsl(244, 81%, 46%)'],

            // 使用“插值”表达式为
            // 建筑物作为用户放大
            'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'height']],
            'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'min_height']],
            'fill-extrusion-opacity': 0.6
          }
        },
        labelLayerId
      )
      // layer fill geojson
      map.addLayer({
        id: 'geoPolygon_1',
        type: 'fill',
        source: {
          type: 'geojson',
          data: {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [
                [
                  [120.31069093175762, 36.071459514397716],
                  [120.31260590943191, 36.0662767896156],
                  [120.31689357484646, 36.06727711803639],
                  [120.3137201355035, 36.06971583160394],
                  [120.31353524030624, 36.0735418737998],
                  [120.31069093175762, 36.071459514397716]
                  // [116.89512245987947, 36.67479647924432],
                  // [116.8951198613002, 36.666413920165795],
                  // [116.8990505915607, 36.66643564516552],
                  // [116.89990419719845, 36.67481236873901],
                  // [116.89512245987947, 36.67479647924432]
                ]
              ]
            }
          }
        },
        layout: {},
        paint: {
          'fill-color': '#00ff78',
          'fill-opacity': 0.5,
          'fill-outline-color': '#15def2'
        }
      })
      // layer fill geojson https://www.mapbox.cn/mapbox-gl-js/example/geojson-polygon/
      map.addLayer({
        id: 'geoPolygon_2',
        type: 'fill',
        source: {
          type: 'geojson',
          data: {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [
                [
                  [120.31386645128458, 36.07352407299466],
                  [120.31406051266816, 36.06973548187716],
                  [120.31703395879913, 36.067476673147524],
                  [120.31903338030969, 36.06914023164856],
                  [120.31725031669936, 36.072912209593554],
                  [120.31386645128458, 36.07352407299466]
                  // [116.90015862619504, 36.67485225304701],
                  // [116.89925746159167, 36.66643736142822],
                  // [116.90449322417288, 36.66646071375989],
                  // [116.90474640425532, 36.674772049527036],
                  // [116.90015862619504, 36.67485225304701]
                ]
              ]
            }
          }
        },
        layout: {},
        paint: {
          'fill-color': '#0becff',
          'fill-opacity': 0.5,
          'fill-outline-color': '#15def2'
        }
      })

      map.on('click', (e) => {
        console.log(e)
      })

      // add marker popup
      var popup = new mapboxgl.Popup({
        offset: [180, -20],
        className: 'IBM_popup',
        maxWidth: 'none'
      }).setText('某某站')
      // create DOM element for the marker
      var el = document.createElement('div')
      el.innerHTML = '<span>点位</span>'
      el.id = 'marker'

      // create the marker
      new mapboxgl.Marker(el)
        .setLngLat([120.31319853001287, 36.069633414671344])
        // .setLngLat([116.89759274743653, 36.66859665993769])
        .setPopup(popup) // sets a popup on this marker
        .addTo(map)
    })
  }
}
</script>

<style lang="scss">
.index_map_box {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;

  #marker {
    position: relative;
    width: 60px;
    height: 100px;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../../assets/img/point_marker.png');

    cursor: pointer;

    font-size: 14px;
    color: #fff;

    span {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 20px);
    }
  }

  .IBM_popup {
    .mapboxgl-popup-tip {
      position: absolute;
      top: 0;
      left: 0;
      border: unset;
      width: 100%;
      height: 15px;
      background-color: #18b9dd;
    }

    .mapboxgl-popup-content {
      background-color: rgba(12, 32, 86, 0.5);
      border: 1px solid #18b9dd;
      color: #fff;
      padding: 30px;
      width: 300px;
      height: 150px;
    }

    .mapboxgl-popup-close-button {
      top: 10px;
      color: #fff;
      font-size: 30px;
    }
  }
}
</style>
